<template>
  <el-dialog v-model="chakan" title="学生详情" @close="closeDialog">
    <el-table :data="xiangqing">
      <el-table-column label="ID" prop="id" width="50"></el-table-column>
      <el-table-column
        label="学生姓名"
        prop="s_name"
        width="100"
      ></el-table-column>
      <el-table-column label="性别" prop="s_sex" width="80"></el-table-column>
      <el-table-column label="年龄" prop="s_age" width="80"></el-table-column>
      <el-table-column
        label="民族"
        prop="s_minzu"
        width="100"
      ></el-table-column>
      <el-table-column label="班级" prop="b_name" width="100"></el-table-column>
      <el-table-column
        label="学号"
        prop="s_xuehao"
        width="100"
      ></el-table-column>
      <el-table-column
        label="联系方式"
        prop="s_lianxi"
        width="150"
      ></el-table-column>
      <el-table-column
        label="家庭住址"
        prop="s_dizhi"
        width="200"
      ></el-table-column>
      <el-table-column
        label="身份证号"
        prop="s_shenfenzheng"
        width="180"
      ></el-table-column>
      <el-table-column align="right"> </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="chakan = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="xiugai" title="修改信息" @close="qingkong">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="学生姓名"
        :label-width="formLabelWidth"
        prop="s_name"
      >
        <el-input v-model="form.s_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" prop="s_sex">
        <el-radio-group v-model="form.s_sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="联系方式"
        :label-width="formLabelWidth"
        prop="s_lianxi"
      >
        <el-input
          v-model="form.s_lianxi"
          autocomplete="off"
          :maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth" prop="s_age">
        <el-input
          v-model="form.s_age"
          autocomplete="off"
          :maxlength="2"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="班级名称"
        :label-width="formLabelWidth"
        prop="b_name"
      >
        <el-input v-model="form.b_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学号" :label-width="formLabelWidth" prop="s_xuehao">
        <el-input
          v-model="form.s_xuehao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
      <el-form-item label="民族" :label-width="formLabelWidth" prop="s_minzu">
        <el-input v-model="form.s_minzu" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="家庭住址"
        :label-width="formLabelWidth"
        prop="s_dizhi"
      >
        <el-input v-model="form.s_dizhi" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="身份证号"
        :label-width="formLabelWidth"
        prop="s_shenfenzheng"
      >
        <el-input
          v-model="form.s_shenfenzheng"
          autocomplete="off"
          maxlength="18"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugai = false">取消</el-button>
        <el-button type="primary" @click="genggai('ruleForm')">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-table :data="tableData.slice((currentPage4 - 1) * size, currentPage4 * size)">
    <el-table-column label="ID" prop="id" width="80"></el-table-column>
    <el-table-column
      label="学生姓名"
      prop="s_name"
      width="180"
    ></el-table-column>
    <el-table-column
      label="班级名称"
      prop="b_name"
      width="180"
    ></el-table-column>
    <el-table-column label="性别" prop="s_sex" width="180"></el-table-column>
    <el-table-column label="年龄" prop="s_age" width="180"></el-table-column>
    <el-table-column label="民族" prop="s_minzu" width="130"></el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入学生姓名关键字后单击回车搜索"
          @keyup.enter="mohuchaxun"
        />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="(chakan = true), chaxunid(scope.row.id)"
          >查看</el-button
        >
        <el-button size="mini" type="primary" @click="gai(scope.row.id)"
          >修改</el-button
        >
        <el-button size="mini" type="danger" @click="shanchu(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10,25]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
const axios = require("axios");
export default {
  name: "GLstudent",
  data() {
    return {
      total: 0,
      size: 10,
      currentPage4: 1,
      search: "",
      xiugai: false,
      chakan: false,
      t_bianhao: "",
      xiangqing: [],
      form: {
        b_name: "",
        s_age: "",
        s_dizhi: "",
        s_lianxi: "",
        s_minzu: "",
        s_sex: "",
        s_name: "",
        s_shenfenzheng: "",
        s_xuehao: "",
        delivery: false,
      },
      rules: {
        s_name: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        s_lianxi: [
          { required: true, message: "请输入学生联系方式", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度是 11 个字符",
            trigger: "blur",
          },
        ],
        s_age: [
          { required: true, message: "请输入学生年龄", trigger: "blur" },
          {
            min: 2,
            max: 2,
            message: "长度是 2 个字符",
            trigger: "blur",
          },
        ],
        s_xuehao: [
          { required: true, message: "请输入学生学号", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度是 6 个字符",
            trigger: "blur",
          },
        ],
        b_name: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
          {
            min: 4,
            max: 10,
            message: "长度在 4 到 10 个字符",
            trigger: "blur",
          },
        ],
        s_dizhi: [
          { required: true, message: "请输入学生家庭住址", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        s_minzu: [
          { required: true, message: "请输入学生民族", trigger: "blur" },
          {
            min: 2,
            max: 6,
            message: "长度在 2 到 6 个字符",
            trigger: "blur",
          },
        ],
        s_shenfenzheng: [
          { required: true, message: "请输入学生身份证号", trigger: "blur" },
          {
            min: 18,
            max: 18,
            message: "长度是 18 个字符",
            trigger: "blur",
          },
        ],
        s_sex: [
          { required: true, message: "请选择学生性别", trigger: "blur" },
          {
            trigger: "blur",
          },
        ],
      },
      tableData: [
        {
          s_id: "",
          b_name: "",
          s_age: "",
          s_dizhi: "",
          s_lianxi: "",
          s_minzu: "",
          s_name: "",
          s_sex: "",
          s_shenfenzheng: "",
          s_xuehao: "",
        },
      ],
    };
  },
  methods: {
    handleSizeChange: function (size) {
      this.size = size;
    },
    handleCurrentChange: function (currentPage4) {
      this.currentPage4 = currentPage4;
    },
    qingkong() {
      this.form = {
        b_name: "",
        s_age: "",
        s_dizhi: "",
        s_lianxi: "",
        s_minzu: "",
        s_sex: "",
        s_name: "",
        s_shenfenzheng: "",
        s_xuehao: "",
      };
    },
    gai(g) {
      this.xiugai = true;
      this.chaxunid2(g);
    },
    closeDialog() {
      this.xiangqing = []; //清空数据
    },
    mohuchaxun() {
      let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/mohuxuesheng", {
          params: {
            mohu: _this.search,
          },
        })
        .then(function (response) {
          console.log(response);
          _this.tableData = response.data;
        });
    },
    shanchu(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/teacher/shanchuxuesheng", {
          params: {
            id: id,
          },
        })
        .then(function (response) {
          console.log(response);
          if (response.data >= 1) {
            _this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
          } else {
            _this.$notify({
              title: "警告",
              message: "删除失败",
              type: "warning",
            });
          }
          _this.chaxun();
        });
    },
    genggai(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.form.s_age = parseInt(this.form.s_age);
          console.log(this.form);
          axios
            .get("https://localhost:44391/api/guanliyuan/chaxunbanji", {
              params: {
                bname: this.form.b_name,
              },
            })
            .then(function (response) {
              console.log(response);
              if (response.data == "") {
                _this.$notify({
                  title: "警告",
                  message: "修改失败!未查询到该班级!请检查班级是否输入正确!",
                  type: "warning",
                });
              }
              if (response.data != "") {
              axios
                .post(
                  "https://localhost:44391/api/teacher/xiugaixueshengxinxi",
                  _this.form
                )
                .then(function (response) {
                  console.log(response);
                  if (response.data >= 1) {
                    _this.$notify({
                      title: "成功",
                      message: "修改成功",
                      type: "success",
                    });
                    _this.xiugai = false;
                    _this.chaxun();
                  } else {
                    _this.$notify({
                      title: "警告",
                      message: "修改失败",
                      type: "warning",
                    });
                  }
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    chaxun() {
      let _this = this;
      console.log(_this.t_bianhao);
      if (_this.t_bianhao == "") {
        _this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/guanliyuan/chaxunsuoyou", {
          })
          .then(function (response) {
            console.log(response.data);
            _this.tableData = response.data;
             _this.total = response.data.length;
          });
      }
    },
    chaxunid(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/teacher/chaxunid", {
          params: {
            id: id,
          },
        })
        .then(function (response) {
          console.log(response.data);
          //   _this.xiangqing = chaxun.data;
          //将数据类型转换成数组，push到数组里
          _this.xiangqing.push(response.data);
        });
    },
    chaxunid2(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/teacher/chaxunid", {
          params: {
            id: id,
          },
        })
        .then(function (response) {
          console.log(response.data);
          _this.form = response.data;
        });
    },
  },
  mounted() {
    this.t_bianhao = this.$store.state.t_bianhao;
    this.chaxun();
  },
};
</script>

<style>
</style>